<template>
    <div>
        <el-row class="add">
            <el-button type="text" @click="dialogFormVisible = true">增加商品</el-button>
            <el-dialog size="mini" title="增加商品" :visible.sync="dialogFormVisible">
              <el-form size="mini" :model="form">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品库存" :label-width="formLabelWidth">
                  <el-input v-model="form.quantity" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                  <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" :label-width="formLabelWidth">
                  <el-input v-model="form.descriptions" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品主图地址" :label-width="formLabelWidth">
                  <el-input v-model="form.coverImg" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品分类名称" :label-width="formLabelWidth">
                  <el-input v-model="form.productCategory" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sub()">确 定</el-button>
              </div>
            </el-dialog>
            <el-dialog size="mini" title="增加商品分类" :visible.sync="categoryVisible">
              <el-form size="mini" :model="cate">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input v-model="cate.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品简介" :label-width="formLabelWidth">
                  <el-input v-model="cate.descriptions" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品主图地址" :label-width="formLabelWidth">
                  <el-input v-model="cate.coverImg" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="categoryVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
              </div>
            </el-dialog>
            <el-col :span="6">

            </el-col>
            
        </el-row>
        <el-row>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              align="center"
              width="100"
              type="index">
            </el-table-column>
            <el-table-column
              width="240"
              label="商品名称"
              prop="name">
            </el-table-column>
            <el-table-column
              label="商品价格"
              prop="price">
            </el-table-column>
            <el-table-column
              label="商品库存"
              prop="quantity">
            </el-table-column>
            <el-table-column
              label="商品所属分类"
              prop="productCategory.name">
            </el-table-column>
            <el-table-column
              width="300"
              align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"/>
              </template>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-dialog style="text-align:left;" size="mini" title="修改商品信息" :visible.sync="productVisible">
                    <img class="coverImg" :src="detail.coverImg" alt="">
                    <el-form size="mini" :model="cate">
                      <el-form-item label="分类名称" :label-width="formLabelWidth">
                        <el-input v-model="detail.name" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="分类ID" :label-width="formLabelWidth">
                        <el-input v-model="detail._id"  autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="商品简介" :label-width="formLabelWidth">
                        <el-input v-model="detail.descriptions" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="商品价格" :label-width="formLabelWidth">
                        <el-input v-model="detail.price" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="商品库存" :label-width="formLabelWidth">
                        <el-input v-model="detail.quantity" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="商品主图地址" :label-width="formLabelWidth">
                        <el-input v-model="detail.coverImg" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="商品分类名称" :label-width="formLabelWidth">
                        <el-input v-model="detail.productCategory.name" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button size="mini" @click="productVisible = false">取 消</el-button>
                      <el-button size="mini" type="primary" @click="edit()">确 定</el-button>
                    </div>
                  </el-dialog>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <div class="block" v-if="pages<7">
            <el-pagination @current-change="change"
              layout="prev, pager, next"
              :total="pages*10">
            </el-pagination>
          </div>
          <div class="block" v-else>
            <el-pagination @current-change="change"
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </el-row>
    </div>
</template>


<script>
import * as api from '@/api/product'
import * as cateApi from '@/api/category'
import axios from 'axios'
export default {
    name:'Prolist',
    data(){
        return{
            title:'商品管理',
            formLabelWidth:'200px',
            list:'',
            tableData:'',
            command:'肉禽',
            form:{
                name:'商品名称',
                descriptions:'起送￥10  配送￥2',
                quantity:100,
                price:2.1,
                coverImg:'http://118.190.54.193/img/shop_logo_11.jpg',
                productCategory:'5dbc1969440b810ee8ed76a2'
            },
            cate:{
                name:'',
                descriptions:'',
                coverImg:'',
            },
            detail:{
                name:'商品名称',
                descriptions:'商品描述|商品规格',
                quantity:500,
                price:12,
                coverImg:'商品主图地址',
                productCategory:{}
            },
            dialogFormVisible:false,
            categoryVisible:false,
            search:'',
            productVisible:false,
            pages:0,
        }
    },
    methods:{
        //增
        sub(){
          console.log(this.form)
          // api.getProlist({per:10000}).then(data=>{
          //   let arr = data.data.products
          //   for(let i=0;i<15;i++){
          //     let index = parseInt(Math.random()*86+150)
          //     let obj = arr[index]
          //     let targetObj = {
          //       name:obj.name,
          //       descriptions:obj.descriptions,
          //       quantity:obj.quantity,
          //       price:obj.price,
          //       coverImg:obj.coverImg,
          //       productCategory:'5dc37b8b289c25084044361e'  
          //     }
          //     api.addProduct(targetObj).then(data=>{
          //         console.log(data)
          //     })
          //   }
          // })
          api.addProduct(this.form).then(data=>{
              console.log(data)
              this.$message({
                message: '成功添加一条商品',
                type: 'success'
              });
              this.change(1)
          })
        },
        add(){
          // let cate={
          //       name:'',
          //       descriptions:'',
          //       coverImg:'',
          // }
          // api.getProlist({per:7}).then(data=>{
          //   let arr = data.data.products
          //   for(let i=0;i<arr.length;i++){
          //     // let index = parseInt(Math.random()*86)
          //     let obj = arr[i]
          //     let targetObj = {
          //       name:obj.name,
          //       descriptions:'10',
          //       coverImg:obj.coverImg,
          //     }
          //     cateApi.addCategory(targetObj).then(data=>{
          //       console.log(data)
          //       this.loadList()
          //     })
          //   }
          // })
          cateApi.addCategory(this.cate).then(data=>{
            console.log(data)
            this.loadList()
          })
        },

        //改
        handleEdit(index, row) {
          console.log(index, row);
          this.productVisible = true
          this.detail = row
        },
        edit(){
          console.log(this.detail)
          api.editProduct(this.detail).then(data=>{
            console.log(data)
            this.productVisible = false
          })
        },
        

        //删
        handleDelete(index, row) {
          console.log(index, row._id);
          this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              api.deleteProduct(row._id).then(data=>{
                console.log(data)
                this.tableData.splice(row,1)
                this.change(1)
              })
              this.$message({
                  type: 'success',
                  message: '删除成功!'
              });
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              });          
          });
        },

        //分页器
        change(page){
          console.log(page)
          api.getProlist({per:5,page:page}).then(data=>{
            this.tableData = data.data.products
          })
        },

        loadList(){
          api.getProlist({per:5}).then(data=>{
            this.tableData = data.data.products
            this.pages = data.data.pages
          })
        }
    },
    mounted(){
        this.$emit('toparent',this.title)
        api.getProlist({per:5}).then(data=>{
          this.tableData = data.data.products
          this.pages = data.data.pages
        })
    }
}
</script>


<style scoped>
    .el-form-item{
        margin-bottom:10px;
    }
    .el-row{
      margin-bottom:10px;
    }
    .el-dialog{
      position: relative;
    }
    .el-form{
      margin:0 0 0 40px;
      padding:0;
    }
    .dialog-footer{
      margin:0;
    }
    .coverImg{
      width:100px;
      position: absolute;
      left:20px;
      top:100px;
    }
</style>

